<style>
    .yx_alert_overlay{
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.5);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
    }
    .yx_alert_container{
        min-width: 300px;
        background-color: #fff;
    }
    .yx_alert_title{
        padding: 0 80px 0 20px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #F0F0F0;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        border-radius: 2px 2px 0 0;
    }
    .yx_alert_content {
        position: relative;
        padding: 20px;
        line-height: 24px;
        word-break: break-all;
        overflow: hidden;
        color: #333;
        font-size: 14px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .yx_alert_foot {
        text-align: right;
        padding: 0 15px 12px;
        pointer-events: auto;
        user-select: none;
        -webkit-user-select: none;
    }
    .yx_alert_btn {
        height: 28px;
        line-height: 28px;
        margin: 5px 5px 0;
        padding: 0 15px;
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        text-decoration: none;
        border-color: #1E9FFF;
        background-color: #1E9FFF;
        color: #fff;
        display: inline-block;
    }
</style>
<div class="yx_alert_overlay">
    <div class="yx_alert_container">
        <div class="yx_alert_title">提示</div>
        <div class="yx_alert_content">
            开启语音播报
        </div>
        <div class="yx_alert_foot">
            <div class="yx_alert_btn">
                确定
            </div>
        </div>
    </div>
</div>
<script>
    // 页面中使用 直接yx_alert.show(option, ()=> {});
    // option 为字符串是代表的是content内容
    // option 为对象是可以传递title头部信息 content内容 btnTxt按钮文字
    function YXAlert() {
        const defaultOption = {
            title: '提示',
            content: '',
            btnTxt: '确认'
        }
        this.show = function(option, fn) {
            if(!option) {
                throw ('option不能为空');
                return;
            }
            let last_option = {}
            if(typeof option == 'object') {
                last_option = {...defaultOption, ...option};
            } else {
                last_option = {...defaultOption, ...{content: option}}
            }
            $('.yx_alert_title').text(last_option.title);
            $('.yx_alert_content').text(last_option.content);
            $('.yx_alert_btn').text(last_option.btnTxt);
            $('.yx_alert_overlay').css('display', 'flex');
            // 按钮回调
            $('.yx_alert_btn').click(function () {
                $(this).parents('.yx_alert_overlay').hide();
                if(fn) {
                    fn();
                }
            })
        }

    }
    const yx_alert = new YXAlert();
</script>
